<template>
    <div>
        <!-- 子传父第一步 -->
        <!-- 直接写在标签上 -->
<h1 @click="$emit('changeCount',10,20)">{{ xxx }}</h1>
<h2 @click="fn">{{ xxx }}</h2>
<h1>{{ msg }}</h1>
    </div>
</template>

<script>

export default {
    //第一种方法，通过数组拿，不推荐
    // props:['xxx','msg'],
    props: {
        //第二种写法，通过对象拿
        //不是必传
        // xxx: Number,
        // msg:String

        //第三种写法，通过对象拿
        //是必传
        xxx: {
            type: Number,
            // required: true
            // default: 100,
            // 做一个数据提示报错，拿到父传子数据做一个判断
            validator(value) {
                //returntrue表示数据ok，不会报错
                //returnfalse表示数据有问题，会报错
                if (value > 100) {
                    return true
                } else {
                    console.error('Count接收的props.xxx数据有问题，xxx不能小丁100')
                    return false
                }
            }
            
        },
        msg: {
            type: String,
            required: true

        }
    },
    //组件通信：子传父
    //1、子组件通过vue内置的$emit方法传出去自定义事件和实参
    //2、父组件中的子组件标签上通过@监听自定义事件
    //3、在methods中处理子传父的逻辑
    methods: {
        // 通过函数的形式传出去
        fn() {
            this.$emit('changeCount', 10, 20)
        }
    },
}
</script>

<style lang="scss" scoped>

</style>